import React, { Component } from 'react';
import InputLanguage from 'components/template/input-language';
import { Button, Dropdown, Icon, Menu, Popover, Input, message } from 'antd';
import { messages } from 'share/common';
import { summaryWayMap, sequenceWayMap } from 'containers/data-center/report-management/custom-report/custom-report.modal';

class SingleAttribute extends Component {
  constructor(props) {
    super(props);
    this.state = {
      visible: false,
      popoverVisible: false,
      currentName: this.props.widget.slaveColumnDisplayName || this.props.widget.fieldDisplayName || this.props.widget.columnDisplayName,
      currentI18n: {
        name: this.props.widget.fieldDisplayName || this.props.widget.columnDisplayName,
        i18n: this.props.widget.i18n ? (this.props.widget.i18n.fieldDisplayName || this.props.widget.i18n.columnDisplayName) : []
      }
    };
    this.shouldNotClose = false;
  }

  componentWillReceiveProps(nextProps, nextContext) {
    this.setState({
      currentI18n: {
        name: nextProps.widget.fieldDisplayName || nextProps.widget.columnDisplayName,
        i18n: nextProps.widget.i18n ? (nextProps.widget.i18n.fieldDisplayName || nextProps.widget.i18n.columnDisplayName) : []
      }
    })
  }

  componentDidMount() {

  }

  onMenuSelect = (e) => {
    const { widget } = this.props;
    let map = ['asc', 'desc', 'default_order'];
    if (map.indexOf(e.key) !== -1) {
      this.props.onChangeDataStatus && this.props.onChangeDataStatus(e.key, widget, true);
      this.setState({ visible: false });
    } else {
      this.props.onChangeDataStatus && this.props.onChangeDataStatus(e.key, widget, false);
      this.setState({ visible: false });
    }
  };

  onHide = () => {
    this.setState({ popoverVisible: false });
  };

  handleVisibleChange = (popoverVisible) => {
    if (!this.shouldNotClose) {
      this.setState({ popoverVisible });
    }
  };

  i18nChange = (value) => {
    this.setState({ currentI18n: value });
  };

  Change = (e) => {
    this.setState({ currentName: e.target.value });
  }

  saveI18n = () => {
    const { widget } = this.props;
    const { currentName } = this.state;
    this.props.onSaveI18n && this.props.onSaveI18n(currentName, widget);
    this.setState({ popoverVisible: false, visible: false });
  };

  onVisibleChange = (e) => {
    if (!this.shouldNotClose) {
      if (!e) {
        this.setState({ visible: e, popoverVisible: e });
      } else {
        this.setState({ visible: e });
      }
    }
  };

  handleOnClick = (e, widget, disabledItem) => {
    e.stopPropagation();
    if (disabledItem)
      message.warn(messages('basic-10.key110')/*已有该字段，不能重复添加*/);
    else
      this.props.onItemClick && this.props.onItemClick(e, widget)
  }

  render() {
    const { widget, hoverItem, key, disabled, currentSelect, unique } = this.props;
    const { currentName, visible } = this.state;
    let disabledItem = !!(currentSelect && currentSelect.length && currentSelect.find(item => item.slaveColumnId === widget.id));
    let highLight = hoverItem ? hoverItem.slaveColumnId === widget.id : undefined;

    const content = (
      <div>
        <Input value={currentName} onChange={this.Change}/>
        <div style={{ marginTop: 12, textAlign: 'right' }}>
          <Button onClick={this.onHide}>{messages('common.cancel')/*取消*/}</Button>
          <Button onClick={this.saveI18n} style={{ marginLeft: 8 }}
                  type='primary'>{messages('common.ok')/*确定*/}</Button>
        </div>
      </div>
    );
    const indicatorMenu = (
      <Menu className={'custom-report-menu-class'} onClick={this.onMenuSelect}>
        <Menu.Item key="name">
          <Popover
            placement="rightTop"
            visible={this.state.popoverVisible}
            content={content}
            onVisibleChange={this.handleVisibleChange}
            trigger={['click']}
          >
            <div onClick={(e) => {
              e.preventDefault();
              e.stopPropagation();
            }}>{messages('basic-10.key94')/*修改显示名称*/}</div>
          </Popover>
        </Menu.Item>
        <Menu.Item key="delete">
          <div onClick={(e) => {
            e.stopPropagation();
            this.setState({ visible: false }, () => {
              this.props.deleteItem && this.props.deleteItem(widget);
            });
          }}>
            {messages('basic-10.key97')/*删除值*/}
          </div>
        </Menu.Item>
      </Menu>
    );

    return (
      <div
        data-id={`${widget.slaveColumnId || widget.id}`}
        id={`${widget.slaveColumnId || widget.id}-${unique}`}
        key={key}
        className={`wrapped-data-dropped-item ${disabledItem ? 'disabled-field' : ''} ${highLight ? 'high-light' : ''}`}
        onMouseOver={()=>{this.props.onItemMouseOver && this.props.onItemMouseOver(widget)}}
        onMouseLeave={()=>{this.props.onItemMouseLeave && this.props.onItemMouseLeave()}}
        onClick={(e)=>{this.handleOnClick(e, widget, disabledItem)}}
      >
        <Dropdown visible={visible} onVisibleChange={this.onVisibleChange}
                  overlay={indicatorMenu}
                  trigger={disabled ? [] : ['click']}>
          <span>
            <Icon type="down"/>
            {widget.slaveColumnDisplayName || widget.columnDisplayName || widget.fieldDisplayName || '-'}
            <Icon type="close" onClick={(e) => {
              e.stopPropagation();
              this.props.deleteItem && this.props.deleteItem(widget);
            }}/>
          </span>
        </Dropdown>
      </div>
    );
  }
}

export default SingleAttribute;
